page{
  font-family: -apple-system, BlinkMacSystemFont,PingFangSC-Medium,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
}
.user-index{
  height:100%;
  width:100%;  
  .head-back{
    position:fixed;
    top:0;
    width:100%;
    z-index:20;
    background:#fff;
    box-shadow:0 2px 3px -1px #D3D7DC; //底部阴影
    .tabs-item{
      display:inline-block;  
      margin-left:32rpx;
      padding:0 20rpx 30rpx; 
      position: relative;
      .user-img{
        width:48rpx;
        height:48rpx; 
        margin-bottom:5rpx; 
      }
      .msg-img{
        margin-bottom:5rpx; 
      }
      .hongdian{
        position: absolute;
        top:5rpx;
        right:20rpx;
        width:18rpx;
        height:18rpx;
        border-radius: 50%;
        background:linear-gradient(90deg,rgba(255,71,114,1) 0%,rgba(253,94,44,1) 100%);
      }
      .switch-box{
        height:64rpx;
        width:172rpx; 
        background:rgba(243,245,249,1);
        border-radius:36rpx;
        box-sizing: border-box;
        position: relative; 
        .icon-box{
          position: absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
          z-index:20;
          background:transparent;
          .icon-img-box{ 
            display:inline-block;
            width:50%; 
            padding-bottom:30rpx; 
            .right{ 
              margin-left:16rpx;
            }
            .left{
              margin-left:28rpx;
            }
            .img{
              margin-top:10rpx; 
            }
          }
        }
        .round{
          position: absolute;
          top:-2rpx;
          left:5rpx;
          width:88rpx;
          height:68rpx;
          background:rgba(255,255,255,1);
          box-shadow:0 1rpx 4rpx 0 rgba(77,104,137,0.41);
          border-radius:38rpx;
          z-index:6;
          transition:all .15s;
        }
        .round-active{
          left:80rpx;
          transition:all .15s;
        }
      }
    }
    .tabs-padding{
      padding:0;
    }
    .tabs{
      margin-left:60rpx;
      .img{
        width:38rpx;
        height:48rpx; 
      } 
      .best-title-icon{
        width:48rpx;
        height:46rpx;  
      }
    } 
  }
  .tab-box{
    overflow:hidden;
  }
  .tab-content{
    height:100%;
    width:100%;
    overflow-y: scroll;
    position:relative;
    .swiper-user-page{
      width:100%;
      height: 100%;
      position:absolute;
    }
    .user-page-one{
      transform:translate(-100%, 0px) translateZ(0px); 
      transition:all .4s;
    }
    .user-page-two{
      transform:translate(100%, 0px) translateZ(0px); 
      transition:all .4s;
    }
    .user-page-index{
      transform:translate(0px, 0px) translateZ(0px); 
      transition:all .4s; 
    }
  }
  .c-movble{
    overflow:hidden;
  }
  //user-page
  .user-page{
    height:100%;
    position:relative;
    .user-page-content{
      width:100%;
      height:56.5vh;
      position: relative;  
      z-index:2; 
      &:after {
        width: 200%;
        height: 100%;
        position: absolute;
        left: -50%;
        top:0;
        z-index: -1;
        content: '';
        border-radius: 0 0 50% 50%;
        background:linear-gradient(#fff,#fff);
      }
      .header{
        width:100%;
        padding-top:3.7vh;
        .head-img{
          width:200rpx;
          height:200rpx;
          border-radius:50%;
        } 
        .name{
          color:#3A3C3E;
          font-size:36rpx; 
          font-weight:bold;
        }
        .site{
          color:#3A3C3E;
          font-size:34rpx; 
          font-weight:bold;
        }
      }
      .edit-group{
        display:flex;
        margin-top:6.6vh;
        padding:0 30rpx;
        .edit-item{
          flex:1;
          .edit-img{
            width:116rpx;
            height:114rpx;
          }
          div{
            color:#878B8F;
            font-size:28rpx;
          }
        }
        .hobbies-item{
          margin-top:2.7vh;
        }
      }
    }
    .user-footer{
      position:absolute;
      bottom:0;
      height:41%;
      width:100%;
      background:#F3F5F7;
      z-index:1;
      .footer-box{
        height:100%;
        width:100%;
        position:relative;
        .absolute-footer{
          width:100%;
          position:absolute;
          bottom:42rpx;
        }
        .dots{ 
          width:100%; 
          margin-bottom:35rpx;
          span{
            display:inline-block;
            width:10rpx;
            height:10rpx;
            margin:0 4rpx;
            border-radius:50%;
          }
          .indicator{
            background:rgba(0,0,0,.3);
          }
          .indicator-active{
            background:#23A2E7;
          }
        }
        .btn{  
          width:540rpx;
          height:90rpx;
          line-height:90rpx;
          font-size:36rpx; 
          margin:auto;
          box-shadow:0px 2px 4px 0px rgba(78,87,97,0.48);
          border-radius:49rpx;
          background:#fff;
          color:#FF5470; 
          font-weight:600;
          &:active{
            opacity:.8;
          }
        }
      }
    }
  }
}

//home-page
.home-page{ 
  .page-content{
    padding-bottom:14vh; 
    .page-back-transform{ 
      animation: pageBack .4s;
      z-index:10;
    }
    @keyframes pageBack{
      0%   {transform:rotateZ(0deg);} 
      50%   {transform:translateY(-30px)}
      /*25%  {transform:rotateY(0deg);}*/
      /*50%  {transform:rotateY(0deg);}*/
      100% {transform:rotate(0deg);}
    }
    @-webkit-keyframes pageBack{
      0%   {transform:rotateZ(0deg);} 
      50%   {transform:translateY(-30px)}
      /*25%  {transform:rotateY(0deg);}*/
      /*50%  {transform:rotateY(0deg);}*/
      100% {transform:rotate(0deg);}
    }
  }
  .footer-btn{
    width:100%; 
    padding:30rpx 32rpx 0;  
    .tabbar-item{
      padding-right:0;
      padding-left:0;
      background:transparent;
      line-height:1; 
    }
    .shear{ 
      color:#FF5470;
    }
    .report{
      color:#808892;
    }
    .footer-btn-box{
      width:100%; 
      height:112rpx; 
      line-height:112rpx;
      background:#fff;
      border-radius:10rpx;
      border:1rpx solid rgba(225,230,235,1);
      font-size:36rpx;
      font-family:PingFangSC-Medium;
      font-weight:500;
      margin-top:32rpx;
    } 
  }
  .operation{
    position:fixed;
    bottom:0;
    left:0; 
    width:96.26vw; 
    height:14vh;
    margin:0 14rpx;
    display:flex;
    align-items:center; 
    justify-content:center;
    .icon-box{
      flex:1; 
      .detail-out-icon,.detail-like-icon{
        width:144rpx;
        height:144rpx;
      } 
    }
    .super-like-icon{
      flex:1;
      display:flex;
      align-items:center;
      justify-content:center;
      .detail-super-like{
        width:112rpx;
        height:112rpx;
      }
    }
    .btn-scale{
      transform: scale(1)  !important;
      transition: all .2s  !important;
    }
    .btn-scale-active{
      transform: scale(.6) !important;
      transition: all .2s !important;
    }
  }
  .user-list-null{ 
    width:100%;
    height:100%;
    .user-header{
      width:512rpx;
      height:512rpx;  
      margin:13.5vh auto 0;
      .wave { 
        position: relative;
        width:512rpx;
        height:512rpx; 
        text-align: center;
        line-height: 456px;
        font-size: 28px;
        color: #FF5470;
        // border:1rpx solid #474D5D;
        border-radius:50%;
        .circle {
          position: absolute; 
          border-radius: 50%;
          opacity: 0;
          width: calc(100%); /* 减去边框的大小 */
          height: calc(100%);/* 减去边框的大小 */
          border: 2px solid #FF5470;
          border-color: #FF5470;
          &:first-child {
            animation: circle-opacity 2s infinite;
          }
          &:nth-child(2) {
            animation: circle-opacity 2s infinite;
            animation-delay: 1s;
          }
          &:nth-child(3) {
            animation: circle-opacity 2s infinite;
            animation-delay: 1.5s;
          } 
          @keyframes circle-opacity{
            from {
                opacity: 1;
                transform: scale(0);
            }
            to {
                opacity: 0;
                transform: scale(1);
            }
          }
        } 
        .content-img{
          position:absolute;
          top:50%;
          left:50%;
          width:144rpx;
          height:144rpx; 
          border-radius:50%;  
          margin-top:-72rpx;
          margin-left:-72rpx;
          z-index:10;
          
        }
      }
    }
    .text-hit{
      padding:0 170rpx;
      margin:80rpx auto 66rpx;
      font-size:28rpx;
      font-family:PingFangSC-Regular;
      font-weight:400;
      color:#808892;
    } 
    .find-btn{
      width:548rpx;
      height:90rpx;
      line-height:90rpx;
      margin:auto;
      color:#fff;
      font-size:28rpx; 
      font-weight:600;
      background:linear-gradient(162deg,rgba(253,114,146,1) 0%,rgba(253,94,44,1) 100%);
      border-radius:45rpx;
    }
    .search-user-list-footer{
      position:fixed;
      top:0;
      bottom:0;
      left:0;
      right:0;
      width:100%;
      height:100%;
      z-index:20;
      .search-modal{
        width:100%;
        height:100%;
        background:rgba(0,0,0,.6);
        z-index:9;
      }
      .search-content{
        position:absolute;
        bottom:0;
        width:100%;
        height:750rpx;
        background:#fff;
        z-index:10;
        border-top-left-radius:30rpx;
        border-top-right-radius:30rpx;
        .title{
          width:100%;
          height:128rpx;
          line-height:128rpx;
          color:#354052;
          font-size:32rpx;
          padding-right:30rpx;
          border-bottom:1rpx solid #D3D7DC;
          .close-search{
            &:active{
              opacity:.7;
            }
          }
        }
        .main{
          width:100%;
          .group{
            padding:0 70rpx;
            margin:52rpx auto 4rpx;
            .group-title{
              span{
                font-size:36rpx;
                font-family:PingFangSC-Medium;
                font-weight:500;
              }
              .scope{
                color:#4E5761;
              }
            }
          }
          .search-btn{
            position:absolute;
            bottom:48rpx;
            left:50%;
            margin-left:-44%;
            width:88%; 
            height:88rpx;
            line-height:88rpx;
            border-radius:44rpx; 
            color:#FFf;
            background:#FF5E66;
            font-size:32rpx;
            &:active{
              opacity:.7;
            }
          }
        }
      }

    }
  }
}